import React, { Component } from 'react';
import { View, Text, Dimensions} from 'react-native';
import CircleSlider from './circle_slider';
import {secondsFormat} from '../../helpers/timeFormat'
import Icon from 'react-native-vector-icons/Ionicons'
import Svg, {G, Path} from 'react-native-svg'

const XCenter = Dimensions.get('window').width/2
const YCenter = Dimensions.get('screen').height/2

var Sound = require('react-native-sound');
//Sound.setCategory('Playback');

const dialRadius = 20
const btnRadius = 25

export default class CircleSliderContainer extends Component {

    constructor (props) {
        super(props)
        this.state = {
            voice_length: 1,
            current_voice_progress: 0,
            playing: false,
            url: props.navigation.state.params.url
        }
    }

    componentDidMount () {
        const {voice_length, url} = this.state
        this.voice = new Sound(url, '', (error) => {
            if (error) {
                Toast.show('音频加载失败，请返回重新尝试')
              return;
            }
            // loaded successfully
            this.state.voice_length = this.voice.getDuration()
        });
    }

    componentWillUnmount() {
        this.voice.release()
    }

    start = () => {
        this.setState({playing: true}, () => {
            this.loop_get_progress = setInterval(() => {
                this.voice.getCurrentTime((sec) => {
                    let _progress = sec / this.state.voice_length * 360
                    this.setState({current_voice_progress: Math.min(_progress, 360)})
                })
            }, 20)

            this.voice.play((success) => {
                if (success) {
                    clearInterval(this.loop_get_progress)
                    this.setState({
                        //current_voice_progress: 360,
                        playing: false
                    })
                    this.state.current_voice_progress = 0
                } else {
                }
            });
        })
    }

    stop = () => {
        this.setState({playing: false}, () => {
            clearInterval(this.loop_get_progress)
            this.voice.pause(); 
        })
    }

    onPress = () => {
        this.state.playing ? this.stop() : this.start()
    }

    setProcess = (x) => {
        this.stop()
        this.setState({current_voice_progress: x})
        this.voice.setCurrentTime(this.state.voice_length * (x / 360))
        //this.state.current_voice_progress = x
        //this.setState({value: x})
    }

    face = () => {
        const {current_voice_progress, voice_length} = this.state
        return secondsFormat(current_voice_progress/360 * voice_length)
        //return this.state.current_voice_progress
    }

    polarToCartesian(angle) {
        let r = dialRadius
        let hC = dialRadius + btnRadius;
        let a = (angle-90) * Math.PI / 180.0;
    
        let x = hC + (r * Math.cos(a));
        let y = hC + (r * Math.sin(a));
        return {x, y}
    }


    getIConPosition = (angle) => {
        let r = dialRadius
        let hC = dialRadius + btnRadius;
        let a = (angle-90) * Math.PI / 180.0;
    
        let x = hC + (r * Math.cos(a));
        let y = hC + (r * Math.sin(a));

        // if (x >= 45 && y <= 45) {
        //     return {right: x , top: YCenter - y}
        // } else if (x >= 45 && y >= 45) {
        //     return {top: YCenter + y, left: x + dialRadius}
        // } 
        if (angle >= 0 && angle < 45) {
            return {top: YCenter - 44 -  hC * 2}
        }

    }

    render() {
        //console.log('position', this.polarToCartesian(this.state.current_voice_progress))
        let startCoord = this.polarToCartesian(0);
        let endCoord = this.polarToCartesian(this.state.current_voice_progress);
        let width = (dialRadius + btnRadius)*2;

        return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'grey'}}>
            <CircleSlider
                value={this.state.current_voice_progress}
                dialWidth={dialRadius}
                btnRadius={btnRadius}
                onValueChange={(x) => {this.setProcess(x)}}
                onIconPress={this.onPress}
                face={this.face}
            />
            <View style={{position: 'absolute'}}>
                <Text style={{fontWeight: 'bold', color: 'white', fontSize: 30}}>{this.face()}</Text>
                {/* <Icon name={'ios-alert'} size={25} style={{left: 50}}/> */}
            </View>
            <View style={{position: 'absolute'}}>
                <Svg 
                    width={width}
                    height={width}
                >
                    <G x={endCoord.x-btnRadius + 44} y={endCoord.y-btnRadius}>
                        <Path fill={'black'} d="M16 9l26.667 16-26.667 16z" />
                    </G>
                </Svg>
            </View>
           
        </View>
        )
    }
}